<template>
  <div ref="health" id="aleftboxtbott" class="aleftboxtbott_cont"></div>
</template>

<script>
import { ref, onMounted, watch} from "vue";
import { useECharts } from "@/hooks/useECharts";

export default {
  name: "health_chart",

  props: {
    echartData: Array
  },
  
  setup(props, ctx) {
    const health = ref(null);
    const { setOptions } = useECharts(health, ctx);

    onMounted(() => {
      drawEchart(props.echartData)
    });

    const drawEchart = (data) => {
      setOptions({
        tooltip: {
          trigger: 'item',
          backgroundColor: "rgba(0, 0, 0, 0.8)",
        },
        legend: {
          bottom: '-5',
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              fontSize: 8,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data,
          },
        ],
      });
    }

    watch(props, (val)=> {
      drawEchart(val.echartData)
    },{ deep: true , immediate: true })

    return {
      health
    }
  },
};
</script>


<style scoped>
.aleftboxtbott_cont {
  box-sizing: border-box;
  width: 91%;
  height: 85%;
  margin-top: 1.8%;
  margin-left: 4.4%;
}
</style>